<template>
  <section class="diary-section">
    <div class="section-decorations">
      <div class="decoration-circle primary"></div>
      <div class="decoration-circle secondary"></div>
    </div>
    <div class="container">
      <h2 class="section-title">📝 情绪日记</h2>
      <p class="section-subtitle">给自己一个温柔的空间，诚实记录内心的声音</p>
      <div class="diary-content">
        <div class="diary-form-container">
          <div class="card">
            <div class="card-header">
              <h3 class="card-title">💕 记录今天的心情</h3>
              <div class="header-actions">
                <button 
                  class="create-diary-btn encrypt-btn member-btn"
                  :class="{ disabled: !canCreateEncrypted }"
                  @click="handleEncryptDiary"
                >
                  🔒 新增加密日记
                  <span v-if="!canCreateEncrypted" class="limit-tooltip">已达免费版上限</span>
                </button>
              </div>
            </div>
            <form @submit.prevent="saveDiary">
              <div class="form-group">
                <label for="date">📅 日期</label>
                <input type="date" id="date" v-model="diaryForm.date" required />
              </div>
              <div class="form-group">
                <label>😊 今天的情绪是？</label>
                <div class="emotion-selector">
                  <button type="button"
                          v-for="emotion in emotions"
                          :key="emotion.value"
                          :class="['emotion-btn', { selected: diaryForm.emotion === emotion.value }]"
                          @click="diaryForm.emotion = emotion.value"
                          :title="emotion.label">
                    <span class="emotion-icon">{{ emotion.icon }}</span>
                    <span class="emotion-label">{{ emotion.label }}</span>
                  </button>
                </div>
              </div>
              <div class="form-group">
                <label for="emotion-level">🌈 情绪强度（1-10）</label>
                <div class="slider-container">
                  <input type="range" id="emotion-level" min="1" max="10" v-model.number="diaryForm.emotionLevel" />
                  <span class="slider-value">{{ diaryForm.emotionLevel }}</span>
                </div>
              </div>
              <div class="form-group">
                <label for="thoughts">💭 今天的想法和感受</label>
                <textarea id="thoughts"
                          v-model="diaryForm.thoughts"
                          rows="6"
                          placeholder="温柔地记录下今天的想法、感受或发生的事情...每一种情绪都值得被看见"
                          required></textarea>
              </div>
              <div class="form-group">
                <label for="gratitude">🙏 今天感恩的事（可选）</label>
                <textarea id="gratitude"
                          v-model="diaryForm.gratitude"
                          rows="3"
                          placeholder="细细回想，今天有什么小小的美好值得感恩？"></textarea>
              </div>
              <div class="gratitude-tip">💡 培养感恩之心可以提升幸福感哦~</div>
              <div class="form-actions">
                <button type="submit" class="primary-btn">💖 保存日记</button>
                <button type="button" class="secondary-btn" @click="resetForm">✨ 清空内容</button>
              </div>
            </form>
          </div>
        </div>
        <div class="diary-entries-container">
          <div class="card">
            <h3 class="card-title">📖 心灵轨迹</h3>
            <div class="diary-filters">
              <input type="date" v-model="filterDate" @change="filterEntries" />
              <select v-model="filterEmotion" @change="filterEntries">
                <option value="" selected>所有情绪</option>
                <option v-for="emotion in emotions" :key="emotion.value" :value="emotion.value">{{ emotion.label }}</option>
              </select>
            </div>
            <div class="diary-entries">
              <div v-if="filteredEntries.length === 0" class="no-entries">
                <div class="no-entries-icon">✨</div>
                <div class="no-entries-text">开始记录您的第一页心灵故事吧！</div>
              </div>
              <div v-else>
                <div v-for="entry in filteredEntries" :key="entry.id" class="diary-entry">
                  <div class="entry-header">
                    <div class="entry-date">{{ formatDate(entry.date) }}</div>
                    <div class="entry-emotion">
                      <span class="emotion-icon">{{ getEmotionIcon(entry.emotion) }}</span>
                      <span class="emotion-label">{{ getEmotionLabel(entry.emotion) }}</span>
                      <span class="emotion-level">强度: {{ entry.emotionLevel }}</span>
                    </div>
                  </div>
                  <div class="entry-content">
                    <p class="entry-thoughts">{{ entry.thoughts }}</p>
                    <div v-if="entry.gratitude" class="entry-gratitude">
                      <span class="gratitude-icon">🙏</span>
                      <p class="gratitude-text">{{ entry.gratitude }}</p>
                    </div>
                  </div>
                  <div class="entry-actions">
                    <span v-if="entry.isEncrypted" class="member-tag">🔒 已加密</span>
                    <button type="button" class="action-btn edit" @click="editEntry(entry)">✏️ 编辑</button>
                    <button type="button" class="action-btn delete" @click="deleteEntry(entry.id)">🗑️ 删除</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 会员引导浮层 -->
    <div v-if="showMemberGuide" class="member-guide-overlay" @click.self="closeMemberGuide">
      <div class="member-guide-content gradient-animation">
        <h3>💎 会员专属特权</h3>
        <p>开通会员解锁无限量加密日记功能，保护您的私密心情记录，让情绪空间更加安全。</p>
        <div class="guide-actions">
          <button class="secondary-btn" @click="closeMemberGuide">取消</button>
          <button class="member-btn" @click="goToMemberCenter">去开通会员</button>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import memberService from '../services/memberService'
import diaryService from '../services/diaryService'

export default {
  name: 'DiaryView',
  data() {
    return {
      diaryForm: {
        id: null,
        date: new Date().toISOString().split('T')[0],
        emotion: '',
        emotionLevel: 5,
        thoughts: '',
        gratitude: '',
        isEncrypted: false
      },
      diaryEntries: [],
      emotions: [
        { label: '开心', value: 'happy', icon: '😊' },
        { label: '平静', value: 'calm', icon: '😌' },
        { label: '焦虑', value: 'anxious', icon: '😰' },
        { label: '生气', value: 'angry', icon: '😠' },
        { label: '伤心', value: 'sad', icon: '😢' },
        { label: '疲惫', value: 'tired', icon: '😴' },
        { label: '压力大', value: 'stressed', icon: '😫' },
        { label: '感激', value: 'grateful', icon: '🙏' },
        { label: '兴奋', value: 'excited', icon: '🤗' },
        { label: '其他', value: 'other', icon: '😐' }
      ],
      filterDate: '',
      filterEmotion: '',
      showMemberGuide: false,
      tempDiaryContent: '',
      isLoading: false,
      loadingMessage: ''
    }
  },
  computed: {
    isMember() {
      return memberService.isMember()
    },
    encryptedDiaryCount() {
      return this.diaryEntries.filter(entry => entry.isEncrypted).length
    },
    canCreateEncrypted() {
      // 会员无限量，免费用户最多3篇
      return this.isMember || this.encryptedDiaryCount < 3
    },
    filteredEntries() {
      return this.diaryEntries.filter(entry => {
        let matchDate = true
        let matchEmotion = true
        
        if (this.filterDate) {
          matchDate = entry.date === this.filterDate
        }
        
        if (this.filterEmotion) {
          matchEmotion = entry.emotion === this.filterEmotion
        }
        
        return matchDate && matchEmotion
      }).sort((a, b) => new Date(b.date) - new Date(a.date))
    }
  },
  mounted() {
    // 加载已有日记
    this.loadEntries()
  },
  activated() {
    // 当组件被重新激活时（比如从其他页面返回），重新加载日记列表
    this.loadEntries()
  },
  watch: {
    // 监听会员状态变化
    isMember(newVal) {
      console.log('会员状态变化:', newVal)
    }
  },
  methods: {
    formatDate(dateString) {
      const date = new Date(dateString)
      return date.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' })
    },
    getEmotionIcon(emotionValue) {
      const emotion = this.emotions.find(e => e.value === emotionValue)
      return emotion ? emotion.icon : '😐'
    },
    getEmotionLabel(emotionValue) {
      const emotion = this.emotions.find(e => e.value === emotionValue)
      return emotion ? emotion.label : '未知'
    },
    showToast(message, type = 'info') {
      if (typeof window !== 'undefined' && window.showToast) {
        window.showToast(message, type)
      } else {
        alert(message)
      }
    },
    async loadEntries() {
      try {
        this.isLoading = true
        this.loadingMessage = '加载日记中...'
        const entries = await diaryService.getDiaryList()
        
        // 转换后端数据格式以适配前端
        if (entries && entries.length >= 0) {
          this.diaryEntries = entries.map(entry => ({
            id: entry.id,
            date: entry.date,
            emotion: this.mapEmotionIdToValue(entry.emotionId),
            emotionLevel: entry.intensity,
            thoughts: entry.thoughts,
            gratitude: entry.gratitude || '',
            isEncrypted: entry.isEncrypted || false
          }))
          
          console.log('成功加载日记列表:', this.diaryEntries.length)
        } else {
          // 如果没有返回数据，清空日记列表
          this.diaryEntries = []
          console.log('没有找到日记记录')
        }
      } catch (error) {
        console.error('加载日记失败:', error)
        
        // 区分真正的错误和"没有日记"的情况
        // 如果错误信息包含特定关键词（如404或"没有记录"），不显示错误提示
        const errorMessage = error.message || '';
        const isNoEntriesError = errorMessage.includes('404') || 
                                errorMessage.includes('没有记录') || 
                                errorMessage.includes('not found');
        
        if (!isNoEntriesError) {
          // 不显示错误提示，保持静默
          console.warn('日记加载失败，但不显示错误提示');
        } else {
          // 对于"没有日记"的情况，清空日记列表但不显示错误
          this.diaryEntries = []
          console.log('用户没有日记记录')
        }
      } finally {
        this.isLoading = false
      }
    },
    // 将后端情绪ID映射到前端情绪值
    mapEmotionIdToValue(emotionId) {
      // 根据后端情绪ID定义的映射
      const emotionMap = {
        1: 'happy',
        2: 'calm',
        3: 'anxious',
        5: 'angry',
        4: 'sad',
        6: 'tired',
        7: 'grateful',
        8: 'excited'
      }
      return emotionMap[emotionId] || 'other'
    },
    // 将前端情绪值映射到后端情绪ID
    mapEmotionValueToId(emotionValue) {
      // 根据后端情绪ID定义的反向映射
      const emotionMap = {
        'happy': 1,
        'calm': 2,
        'anxious': 3,
        'angry': 5,
        'sad': 4,
        'tired': 6,
        'grateful': 7,
        'excited': 8
      }
      return emotionMap[emotionValue] || 0
    },
    async saveDiary() {
      if (!this.diaryForm.emotion) {
        this.showToast('请选择您的情绪', 'warning')
        return
      }
      
      try {
        this.isLoading = true
        const emotionId = this.mapEmotionValueToId(this.diaryForm.emotion)
        
        // 准备API请求数据
        const diaryData = {
          date: this.diaryForm.date,
          emotionId: emotionId,
          intensity: this.diaryForm.emotionLevel,
          thoughts: this.diaryForm.thoughts,
          gratitude: this.diaryForm.gratitude,
          isEncrypted: this.diaryForm.isEncrypted
        }
        
        if (this.diaryForm.id) {
          // 更新现有日记
          await diaryService.updateDiary(this.diaryForm.id, diaryData)
          
          // 更新本地数据
          const index = this.diaryEntries.findIndex(entry => entry.id === this.diaryForm.id)
          if (index !== -1) {
            this.diaryEntries[index] = { ...this.diaryForm }
          }
          
          this.showToast('日记已更新', 'success')
        } else {
          // 创建新日记
          const newEntry = await diaryService.createDiary(diaryData)
          
          // 添加到本地列表
          this.diaryEntries.unshift({
            id: newEntry.id,
            date: newEntry.date,
            emotion: this.mapEmotionIdToValue(newEntry.emotionId),
            emotionLevel: newEntry.intensity,
            thoughts: newEntry.thoughts,
            gratitude: newEntry.gratitude || '',
            isEncrypted: newEntry.isEncrypted || false
          })
          
          this.showToast('日记已保存', 'success')
        }
        
        this.resetForm()
      } catch (error) {
        console.error('保存日记失败:', error)
        this.showToast(this.diaryForm.id ? '更新日记失败，请重试' : '保存日记失败，请重试', 'error')
      } finally {
        this.isLoading = false
      }
    },
    // 处理加密日记创建
    handleEncryptDiary() {
      if (this.canCreateEncrypted) {
        this.diaryForm.isEncrypted = true
        // 保存当前内容以便后续恢复
        this.tempDiaryContent = this.diaryForm.thoughts
        // 提示用户输入密码
        const password = prompt('请设置加密密码（用于查看此日记）：')
        if (password) {
          // 这里简化处理，实际应用中应该使用更安全的加密方式
          // 在真实项目中，应该使用加密库进行密码加密和内容加密
          const hashedPassword = password // 模拟密码处理
          alert('加密日记创建成功！请记住您的密码。')
        }
      } else {
          // 显示会员引导
          this.showMemberGuide = true
        }
      },
      // 关闭会员引导
      closeMemberGuide() {
        this.showMemberGuide = false
      },
      // 前往会员中心
      goToMemberCenter() {
        this.showMemberGuide = false
        this.$router.push('/member-center')
      },
    resetForm() {
      this.diaryForm = {
        id: null,
        date: new Date().toISOString().split('T')[0],
        emotion: '',
        emotionLevel: 5,
        thoughts: '',
        gratitude: '',
        isEncrypted: false
      }
    },
    editEntry(entry) {
      this.diaryForm = { ...entry }
      // 滚动到表单顶部
      window.scrollTo({ top: 0, behavior: 'smooth' })
    },
    async deleteEntry(id) {
      if (!confirm('确定要删除这条日记吗？删除后将无法恢复。')) {
        return
      }
      
      try {
        this.isLoading = true
        await diaryService.deleteDiary(id)
        
        // 更新本地列表
        this.diaryEntries = this.diaryEntries.filter(entry => entry.id !== id)
        
        // 更新localStorage中的数据，确保图表数据也能正确更新
        try {
          const storedEntries = JSON.parse(localStorage.getItem('diaryEntries') || '[]')
          const updatedStoredEntries = storedEntries.filter(entry => entry.id !== id)
          localStorage.setItem('diaryEntries', JSON.stringify(updatedStoredEntries))
        } catch (e) {
          console.error('更新localStorage失败:', e)
        }
        
        this.showToast('日记已删除', 'success')
      } catch (error) {
        console.error('删除日记失败:', error)
        this.showToast('删除日记失败，请重试', 'error')
      } finally {
        this.isLoading = false
      }
    },
    filterEntries() {
      // 过滤逻辑已通过computed属性实现
    }
  }
}
</script>

<style scoped>
.diary-section {
  padding: 3rem 0;
  position: relative;
  overflow: hidden;
}

.section-decorations {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.decoration-circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.3;
  animation: float 15s ease-in-out infinite;
}

.decoration-circle.primary {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--primary-light), transparent);
  top: -200px;
  right: -100px;
}

.decoration-circle.secondary {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, var(--secondary-light), transparent);
  bottom: -100px;
  left: -100px;
  animation-delay: 3s;
}

.container {
  position: relative;
  z-index: 1;
}

.section-title {
  font-size: 2.2rem;
  color: var(--primary-color);
  text-align: center;
  margin-bottom: 0.8rem;
  font-weight: 800;
  text-shadow: 0 2px 8px rgba(123, 104, 238, 0.2);
}

.section-subtitle {
  text-align: center;
  color: var(--text-light);
  font-size: 1.1rem;
  margin-bottom: 3rem;
  font-weight: 400;
}

.diary-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.card {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--light-border);
  transition: var(--transition);
}

.card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-5px);
}

.card-title {
  font-size: 1.8rem;
  margin-bottom: 1.8rem;
  color: var(--primary-color);
  font-weight: 700;
  position: relative;
  display: inline-block;
}

.card-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 50%;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
  border-radius: 3px;
}

.form-group {
  margin-bottom: 2rem;
  position: relative;
}

.form-group label {
  display: block;
  margin-bottom: 0.8rem;
  font-weight: 500;
  color: var(--text-color);
  font-size: 1.05rem;
}

.emotion-selector {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.emotion-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0.5rem;
  border: 2px solid var(--light-border);
  background-color: white;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.emotion-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
  transform: scaleX(0);
  transition: var(--transition);
}

.emotion-btn:hover {
  border-color: var(--primary-color);
  transform: translateY(-3px);
  box-shadow: var(--shadow-light);
}

.emotion-btn:hover::before {
  transform: scaleX(1);
}

.emotion-btn.selected {
  border-color: var(--primary-color);
  background-color: rgba(123, 104, 238, 0.1);
}

.emotion-btn.selected::before {
  transform: scaleX(1);
}

.emotion-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  transition: transform 0.3s ease;
}

.emotion-btn:hover .emotion-icon {
  transform: scale(1.2) rotate(5deg);
}

.emotion-label {
  font-size: 0.9rem;
  text-align: center;
  color: var(--text-color);
}

.slider-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.slider-container input[type="range"] {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: var(--light-bg);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: var(--transition);
}

.slider-container input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
  cursor: pointer;
  box-shadow: var(--shadow-light);
  transition: var(--transition);
}

.slider-container input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: var(--shadow);
}

.slider-container input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
  cursor: pointer;
  box-shadow: var(--shadow-light);
  transition: var(--transition);
  border: none;
}

.slider-container input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.2);
  box-shadow: var(--shadow);
}

.slider-value {
  font-weight: bold;
  color: var(--primary-color);
  min-width: 20px;
  font-size: 1.1rem;
}

input[type="date"],
select {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 2px solid var(--light-border);
  border-radius: var(--radius-md);
  font-size: 1rem;
  transition: var(--transition);
  background-color: white;
}

input[type="date"]:focus,
select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(123, 104, 238, 0.1);
}

textarea {
  width: 100%;
  padding: 1rem;
  border: 2px solid var(--light-border);
  border-radius: var(--radius-md);
  font-size: 1rem;
  line-height: 1.6;
  resize: vertical;
  min-height: 120px;
  transition: var(--transition);
  font-family: inherit;
  background-color: white;
}

textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(123, 104, 238, 0.1);
}

textarea::placeholder {
  color: var(--text-light);
  font-style: italic;
}

.gratitude-tip {
  font-size: 0.9rem;
  color: var(--accent-color);
  margin-top: 0.5rem;
  font-weight: 500;
}

.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.primary-btn {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
  color: white;
  border: none;
  padding: 0.9rem 1.8rem;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-light);
  position: relative;
  overflow: hidden;
}

.primary-btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.primary-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.primary-btn:hover::before {
  width: 300px;
  height: 300px;
}

.secondary-btn {
  background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
  color: var(--text-color);
  border: none;
  padding: 0.9rem 1.8rem;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-light);
}

.secondary-btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.diary-filters {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.diary-filters input,
.diary-filters select {
  flex: 1;
  max-width: 220px;
}

.diary-entries {
  max-height: 500px;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.diary-entries::-webkit-scrollbar {
  width: 8px;
}

.diary-entries::-webkit-scrollbar-track {
  background: var(--light-bg);
  border-radius: 4px;
}

.diary-entries::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--primary-light), var(--primary-color));
  border-radius: 4px;
}

.diary-entries::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color);
}

.diary-entry {
  padding: 1.5rem;
  border: 1px solid var(--light-border);
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
  transition: var(--transition);
  background-color: white;
  position: relative;
  overflow: hidden;
}

.diary-entry::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 4px;
  background: linear-gradient(to bottom, var(--primary-color), var(--accent-color));
}

.diary-entry:hover {
  box-shadow: var(--shadow);
  transform: translateX(5px);
}

.entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--light-border);
}

.entry-date {
  font-weight: 600;
  color: var(--primary-color);
  font-size: 1.1rem;
}

.entry-emotion {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.emotion-level {
  font-size: 0.9rem;
  color: var(--text-light);
  background-color: var(--light-bg);
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
}

.entry-content {
  margin-bottom: 1rem;
}

.entry-thoughts {
  line-height: 1.7;
  margin-bottom: 1rem;
  color: var(--text-color);
}

.entry-gratitude {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1rem;
  background-color: rgba(152, 251, 152, 0.2);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--secondary-color);
}

.gratitude-icon {
  font-size: 1.5rem;
  margin-top: 0.2rem;
  color: var(--secondary-color);
}

.gratitude-text {
  font-style: italic;
  color: var(--text-color);
  line-height: 1.6;
}

.entry-actions {
  display: flex;
  gap: 0.8rem;
  justify-content: flex-end;
}

.action-btn {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border-radius: 50px;
  border: none;
  transition: var(--transition);
  cursor: pointer;
  font-weight: 500;
}

.action-btn.edit {
  background-color: var(--secondary-color);
  color: white;
  box-shadow: var(--shadow-light);
}

.action-btn.edit:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.action-btn.delete {
  background-color: var(--accent-color);
  color: white;
  box-shadow: var(--shadow-light);
}

.action-btn.delete:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.no-entries {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-light);
}

.no-entries-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  animation: float 3s ease-in-out infinite;
}

.no-entries-text {
  font-size: 1.1rem;
  font-weight: 500;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .diary-content {
    grid-template-columns: 1fr;
  }
  
  .card {
    padding: 1.5rem;
  }
}

@media (max-width: 768px) {
  .section-title {
    font-size: 1.8rem;
  }
  
  .section-subtitle {
    font-size: 1rem;
  }
  
  .card-title {
    font-size: 1.5rem;
  }
  
  .emotion-selector {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
  }
  
  .emotion-icon {
    font-size: 1.5rem;
  }
  
  .diary-filters {
    flex-direction: column;
  }
  
  .diary-filters input,
  .diary-filters select {
    max-width: 100%;
  }
  
  .entry-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .primary-btn,
  .secondary-btn {
    width: 100%;
  }
  
  .diary-entries {
    max-height: 400px;
  }
}

@media (max-width: 480px) {
  .emotion-selector {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .diary-section {
    padding: 2rem 0;
  }
}

/* 新建日记按钮样式 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.encrypt-btn {
  padding: 8px 16px;
  background-color: #B39DDB; /* 莫兰迪紫 */
  color: white;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.encrypt-btn:hover:not(.disabled) {
  background-color: #9575CD;
  transform: scale(1.03);
  box-shadow: 0 2px 8px rgba(179, 157, 219, 0.3);
}

.encrypt-btn.disabled {
  background-color: #E0E0E0;
  color: #9E9E9E;
  cursor: not-allowed;
  transform: none;
}

.limit-tooltip {
  display: none;
}

.encrypt-btn.disabled:hover .limit-tooltip {
  display: inline;
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #555;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
}

/* 加密标识 */
.encrypted-badge {
  background-color: #B39DDB;
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  margin-right: 8px;
}

/* 会员引导浮层 */
.member-guide-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.member-guide-content {
  background: white;
  padding: 2rem;
  border-radius: 16px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  position: relative;
  animation: fadeIn 0.3s ease;
}

.member-guide-content h3 {
  color: #555555;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.member-guide-content p {
  color: #666666;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.guide-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.cancel-btn {
  background-color: #E0E0E0;
  color: #555555;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-btn:hover {
  background-color: #BDBDBD;
}

.go-member-btn {
  background-color: #B39DDB;
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.go-member-btn:hover {
  background-color: #9575CD;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(179, 157, 219, 0.3);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>